<template>
  <div class="paddTwenCss">
    <div>
      <div>
        <el-form>
          <!--<el-row class="rowFormItem">
            <el-col :span="3">
              <el-input v-model="keyword" placeholder="请输入昵称搜索" />
            </el-col>
            &lt;!&ndash; 提交按钮 &ndash;&gt;
            <el-col :span="5" class="clear">
              <el-form-item style="text-align: center;width: 150px;margin-left: 10px;">
                <el-button type="primary" size="large" @click="handleSubmit()">检索</el-button>
                <el-button type="warning" size="large" style="margin-left: 8px" @click="handleReset()">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>-->
        </el-form>
      </div>
      <div class="tableClass">
        <el-table :data="formdata" v-loading="loading" :header-cell-style="{background:'#eef1f6',color:'#606266'}" border
                  style="width: 100%;">
          <el-table-column align="center" prop="id" label="序号" />
          <!--<el-table-column align="center" prop="photo_url" label="用户头像">
            <template slot-scope="scope">
              <el-button type="text" size="medium">
                <img style="width: 50%;" :src="scope.row.user_info.photo_url" />
              </el-button>
            </template>
          </el-table-column>-->
          <el-table-column align="center" prop="type_name" label="申请类型" />
          <el-table-column align="center" prop="realname" label="真实姓名/联系人">
            <template slot-scope="scope">
              <div v-if="scope.row.type == 'personal'">{{scope.row.realname}}</div>
              <div v-else>{{scope.row.contacts_people}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="phone" label="手机号">
            <template slot-scope="scope">
              <div v-if="scope.row.phone ==null">未绑定</div>
              <div v-else>{{scope.row.phone}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="id_card" label="身份证号"/>
          <el-table-column align="center" prop="company_name" label="公司名称" />
          <el-table-column align="center" prop="unified_social_credit_code" label="统一社会信用代码" />
          <el-table-column align="center" prop="created_at" label="提交时间" />
          <el-table-column align="center" prop="vip_info" label="审核状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.review=='0'" type="primary">{{scope.row.review_name}}</el-tag>
              <el-tag v-if="scope.row.review=='1'" type="success">{{scope.row.review_name}}</el-tag>
              <el-tag v-if="scope.row.review=='2'" type="danger">{{scope.row.review_name}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button v-if="scope.row.review == '0'" size="mini" type="primary" @click="confirmReviewAgent(scope.row.id,'pass')">通过</el-button>
              <el-button v-if="scope.row.review == '0'" size="mini" type="danger" @click="confirmReviewAgent(scope.row.id,'refuse')">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <!-- 分页 -->
        <div style="text-align: center;">
          <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="pageSize" :total="totalusers" />
        </div>
      </div>
    </div>
    <!-- </el-card> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        keyword: "",
        addORupdate: "提交",
        modelMsg: false,
        userID: "", //当前选中的会员
        vip_arr: [],
        vip_arrNum: {
          type: "num",
          price: "",
          num: "",
        },
        vip_arrTime: {
          type: "time",
          price: "",
          end_time: ""
        },
        numCheck: false, //选择次数会员
        timeCheck: false, //年费会员
        formdata: [],
        totalusers: 0, //总行数
        pageSize: 10, //每页几行
        startpage: 1, //起始页
      }
    },
    created() {
      this.getAgentApplyList()
    },
    methods: {
      //搜索
      handleSubmit() {
        this.startpage = 1
        this.getAgentApplyList()
      },
      handleReset() {
        this.keyword = ""
      },
      //获取分页列表
      getAgentApplyList() {
        let params = {
          "page": this.startpage,
          "limit": this.pageSize,
          "keyword": this.keyword
        }
        //调用后台提供的接口方法
        this.$api.getAgentApplyList(params).then(res => {
          if (res.data.level == "success") {
            this.formdata = res.data.data
            this.totalusers = res.data.page_info.total
            this.loading = false
          } else {
            this.$message.error(res.data.message)
          }


        })
      },
      //分页 pageChange当前页发生改变触发函数
      async pageChange(page) {
        this.startpage = page
        this.loading = true
        //调用获取列表的方法
        this.getAgentApplyList()
      },


      async confirmReviewAgent(agent_apply_id, type) {

        let showText = ''
        let showType = ''
        if (type == 'pass') {
          showText = '是否通过该审核?'
          showType = 'success'
        } else if (type == 'refuse') {
          showText = '是否拒绝审核?'
          showType = 'warning'
        } else {
          return
        }

        await this.$confirm(showText, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: showType
        }).then(() => {
          let params = {
            type: type,
            agent_apply_id: agent_apply_id
          }
          this.$api.reviewAgent(params).then(res => {
            console.log(res)
            if (res.data.level == "success") {
              this.$message.success(res.data.message)
              this.getAgentApplyList()
            } else {
              this.$message.error(res.data.message)
            }
          })

        }).catch(() => {

        });

      },

    }
  }
</script>
<style scoped="scoped">

  /deep/.el-card__header {
    background-color: #409EFF;
    color: whitesmoke;
  }

  /deep/.el-dialog {
    margin-top: 15vh !important;
    width: 45%;
    min-width: 555px;
  }

  /deep/.el-dialog__body {
    padding: 20px 20px 50px;
  }

  .msgDiv {
    width: 80%;
    margin: auto;
    text-align: center;
  }

  .el-input {
    display: flex;
    flex-grow: <2>;
  }

  table {
    width: 100%;
    font-size: 16px;
    margin-bottom: 40px;
  }

  table th {
    min-width: 40px;
  }

  table tr {
    height: 50px;
  }

  table tr td {
    margin-right: 10px;
  }

  .inputNumer {
    margin: 0 6px;
  }
  .btnAppeal{
    margin-left: 10px;
  }
  .paddTwenCss{
    padding: 12px 5px 5px;
  }
</style>
